<template>
  <div>

    <div class="row">
        <div class="col-md-12">
          <!-- BEGIN EXAMPLE TABLE PORTLET-->
          <div class="portlet box grey-cascade">
            <transition name="fade">
              <Loading :listLoading.sync="loading"></Loading>
            </transition>
            <div class="portlet-title">
              <div class="caption">
                <i class="fa fa-globe"></i>{{this.title}}
              </div>
             <div class="cz">

                <button id="sample_editable_1_new" class="btn green" data-toggle="modal" href="#addData">新增 <i class="fa fa-plus"></i></button>
               <!--  <button id="sample_editable_1_new" style="margin-right: 10px;" class="btn red" data-toggle="modal"  @click="allDelete()">批量删除 <i class="fa fa-trash-o"></i></button>
                <div class="btn-group pull-right ">
                  <button class="btn dropdown-toggle" data-toggle="dropdown">工具 <i class="fa fa-angle-down"></i>
                  </button>
                  <ul class="dropdown-menu pull-right style">
                    <li>
                      <a href="javascript:;">
                      打印 </a>
                    </li>
                    <li>
                      <a href="javascript:;">
                      另存为PDF </a>
                    </li>
                    <li>
                      <a href="javascript:;">
                      导出为Excel </a>
                    </li>
                  </ul>
                </div> -->
            
              </div>

            </div>
            <div class="portlet-body">
              <div class="row m0" style="margin-bottom: 10px;">
                <div class="col-md-3 mb10" style="padding-left: 0;">
                  <select data-v-912aa5a4="" class="bs-select form-control" style="margin-right: 25px;">
                    <option data-v-912aa5a4="">请选择计划类型</option> 
                    <option data-v-912aa5a4="">类型1</option> 
                    <option data-v-912aa5a4="">类型2</option>
                  </select>
                </div>
                <div class="col-md-3 mb10">
                  <select data-v-912aa5a4="" class="bs-select form-control" style="margin-right: 25px;">
                    <option data-v-912aa5a4="">请选择计划对象</option> 
                    <option data-v-912aa5a4="">对象1</option> 
                    <option data-v-912aa5a4="">对象2</option>
                  </select>
                 
                </div>
                <div class="col-md-1 mb10">
                  <button class="btn green">查询 <i class="fa fa-search"></i></button>
                </div>
           
             
              </div>
              <div class="tableDiv">
                <table class="table table-striped table-bordered table-hover" style="color: #333;font-weight: 500;" id="sample_3">
                  <thead>
                    <tr>
                     <th class="table-checkbox">
                      <input type="checkbox" class="group-checkable" data-set="#sample_3 .checkboxes"/> 全选
                     </th>
                      <th>
                         序号
                      </th>
                      <th>
                         名称
                      </th>
                      <th>
                         类型
                      </th>
                      <th>
                         计划对象
                      </th>
                      <th>
                         循环周期
                      </th>
                      <th>
                         频次
                      </th>
                      <th>
                         状态
                      </th>
                      
                      <th>
                         功能操作
                      </th>
                    </tr>
                  </thead>
                  <tbody>

                  <tr class="odd gradeX" v-for="(item,index) in list">
                    <td>
                      <input type="checkbox" class="checkboxes" value="1" @click="checkT(item,$event)"/>
                    </td>
                    <td>
                       {{(page_num-1)*page_size+index+1}}
                    </td>
                    <td>
                       {{item.name}}
                    </td>
                    <td>
                       {{item.typename}}
                    </td>
                    <td>
                       {{item.lb}}
                    </td>
                    <td>
                       {{item.cycle}}
                    </td>
                    <td>
                       {{item.frequency}}
                    </td>
                    <td v-if="item.status==0">
                       禁用
                    </td>
                    <td v-if="item.status==1">
                       启用
                    </td>
                    
                    <td>
                      <a data-toggle="modal" style="color:#5b9bd1" href="#lookinfor" @click="lookData($data,index)">
                        详情
                      </a> 
                      
                    </td>
                  </tr>
                
                  </tbody>
                </table>
                  <!--无数据提示开始-->
                <transition name="fade">
                  <NotConTip :showTip.sync="showTip" :tipText="tipText"></NotConTip>
                </transition>
                <!--无数据提示结束-->
                <div class="block">                    
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 15]"
                    :page-size="page_size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
                </div>
                </div>
            </div>
          </div>
          <!-- END EXAMPLE TABLE PORTLET-->
        </div>
      </div>
     
      <!-- 发布抢单弹框开始 -->
      <div id="sureQd" class="modal fade" tabindex="-1" >
        <div class="modal-title">
          <p>
             发布抢单
          </p>
        </div>
        <div class="modal-body">
          <p style="color: #ff3300;font-weight: 500;">
              确定发布 公区报修事件  1001 为抢单，抢单时间为10分钟，在抢单时间内员工通过APP完成抢单操作。
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
          <button type="button" data-dismiss="modal" @click="sureDelete" class="btn blue">确定</button>
        </div>
      </div>
      <!-- 发布抢单弹框结束 -->

 

  </div>

</template>  

<style scoped>
    .cz{float: right;width: auto;position: relative;top: 3px;left: 5px;}
    .row.center .col-md-3{text-align: center;margin-bottom: 10px;color: #666;font-weight: 500;}
    .row.m10 .col-md-12 .col-md-2,.row .col-md-9{color: #666;font-weight: 500;}
    p {margin: 0 0 10px;}
    .row.center .col-md-6{text-align: left;margin-bottom: 10px;color: #666;font-weight: 500;}
    .row.center .col-md-6 input{border: 1px solid #dbdbdb;width: 50px;padding-left: 5px;color: #333;font-weight: 500;}
    table tr td{text-align: center;vertical-align: middle;}
    .search{margin: 0 0 10px;}
    .search .form-control{width: 100%;display: inline-block;}
    .search button{position: relative;top: -2px;color: #fff;}
    .imgDiv img{width: 100%;}
    .undefinedbootstrap_full_number{text-align: center;;}
    .pagination{display: inline-block;}
    .dataTotal{color: #666;font-weight: 500;position: relative;top: -20px;left: 10px;}
    .pagination li a,.pagination li a .fa{color: #666;font-weight: 500;}
    .pagination li.active a,.numData{color: #26a69a;font-weight: 500;}
    .numData{font-size: 16px;}
    .row.color span{color: #333;font-weight: 500;}
    .row.m0{margin: 0;}
       .row.m10 .col-md-6 >div{margin-bottom: 10px;}
    .row.m10 .col-md-6 .col-md-3{position: relative;top: 6px;color: #333;font-weight: 500;}
     @media (max-width: 768px){
    .cz{margin-bottom: 0px;}
    .dataTotal{top: -5px;}
    .bs-select{width: 60%;}
  }
</style>

<script>
  import '../../../../../static/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js';
  import Metronic from '../../../../../static/global/js/metronic.js'
  import {check,Tips} from '../../../../../static/js/pages/tips.js';
  import ComponentsPickers from '../../../../../static/js/pages/components-pickers.js';
  import Headers from '../../../../components/Headers.vue';
  import Bars from '../../../../components/Bars.vue';
  import Foot from '../../../../components/Foot.vue';
  import NotConTip from '../../../../components/noConTip.vue'
  import optVue from '../../../../config/optVue.js';
  import Loading from '../../../../components/loading.vue';
  export default {
     data(){
      return{
         list:[],
        page: [], //页码数组
        tipText:"暂无数据",
        showTip:false,
        total:null, //总条数  
        lookObj:{},
        modifyNum:{},
        title:"",
        glNum:2,
        glNumChild:2,
        pageNum: null, //页数
        page_size: null, //每页显示多少条
        page_num: null, //当前页码
        dataObj:{}, // json对象
        number:0,
   
        max:5,
        maxNum:5,
        id:null,
        currentPage:1,
        index:null,

        loading:false,
        loadTime:1000
      }
    },
    components: {
        Headers,Bars,Foot,NotConTip,Loading
    },
    mounted(){
      document.title = '计划模板管理';
      var that = this;
      this.title = document.title;
      setTimeout(() => {
        this.loading=true;
        optVue.jhmbgl(this);
      }, this.loadTime)
      $(function(){
        ComponentsPickers.init();
         /*全选反选*/
        check.init($(".table-checkbox"),$(".checkboxes"));

      })
    },
    methods:{
      handleSizeChange(val) {
        var pageArr = {
          page_num:this.currentPage,
          page_size : val
        }
        $(".checkboxes").prop({checked:false});
        $(".group-checkable").prop({checked:false});
        this.pageFun(pageArr);
      },
      handleCurrentChange(val) {
        var pageArr = {
          page_num : val,
          page_size : this.page_size
        }
        $(".checkboxes").prop({checked:false});
        $(".group-checkable").prop({checked:false});
        this.loading = false;
        this.pageFun(pageArr);
      },
      pageFun:function(pageArr){
        $(".checkboxes").prop({checked:false});
        $(".group-checkable").prop({checked:false});
        this.loading = false;
        var that = this;
       
        setTimeout(function(){
          that.loading = true;
          optVue.jhmbglNowPag(that,pageArr);
        },that.loadTime)
      },
     
      deleteData:function (index,data,event) {
        this.data = data;
        this.index = index;
      
      },
      lookData:function(){

      },
      lookSb:function(data,index){
        this.lookObj = data.list[index]
      },
        saveData:function(){
        
      },
      sureDelete:function(){

      },
    
    }

  }

</script>  



